<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
</head>

<body>

    <h3>污染城市列表</h3>
    <ul id="aqi-list">
        <!--   
    <li>第一名：福州（样例），10</li>
      <li>第二名：福州（样例），10</li> -->
    </ul>

    <script type="text/javascript">

        var aqiData = [
            ["北京", 90],
            ["上海", 50],
            ["福州", 10],
            ["广州", 50],
            ["成都", 90],
            ["西安", 100]
        ];

        (function () {

            const aqiRange = 60;

            /*
            在注释下方编写代码
            遍历读取aqiData中各个城市的数据
            将空气质量指数大于60的城市显示到aqi-list的列表中
            */
            function compare(a, b) {
                return b[1] - a[1];
            }

            aqiData.sort(compare);
            console.log(aqiData);  
            var tAqilist = document.getElementById("aqi-list");
            var ranke = 0;
            var rankeSocre = 1000;
            for (var i in aqiData){
                var aqi = aqiData[i];
                console.log("11111111 " + aqi[1]);
                if (aqi[1] > aqiRange){
                    if (rankeSocre != aqi[1]){
                        ranke += 1;
                    }

                    var para = document.createElement("li");
                    var textNode = document.createTextNode("第" + ranke + "名: " + aqi[0] + " " + aqi[1]);
                    para.appendChild(textNode);
                    tAqilist.appendChild(para);

                    rankeSocre = aqi[1];
                }
                else{
                    break;
                }
            }
        })();

    </script>
</body>
</html>
<!-- innerHTML和createTextNode -->